<template>
	<view class="content">
		<!-- 返回主页 -->
		<view class="back" @click="back">
			<view class="backicon"></view>
		</view>
		<view class="toptitle">
			<text>历史考勤记录</text>
		</view>

		<view class="uliststyle">
			<u-list height="1400rpx">
				<u-list-item>
					<view style="margin-left: 20rpx;">
						<view style="margin-top: 20rpx;">
							<view style="float: left;">
								<input class="chooseYear" disabled="true" placeholder="请选择学年" v-model="currentY" @click="showCY=true" />
								<u-picker keyName="text" :show="showCY" :columns="years" @cancel="showCY=false"
									closeOnClickOverlay="true" @close="showCY=false"
									@confirm="yearChange"></u-picker>
							</view>
							<view style="float: left;margin-left: 20rpx;">
								<input class="chooseYear" disabled="true" placeholder="请选择月份" style="width: 220rpx;" v-model="currentM"
									@click="showCM=true" />
								<u-picker keyName="text" :show="showCM" :columns="months" @cancel="showCM=false"
									closeOnClickOverlay="true" @close="showCM=false"
									@confirm="monthChange"></u-picker>
							</view>
							<view class="querybtu" @click="search">
								<view class="btuicon"></view>
								<view style="margin-left: 70rpx;margin-top: -45rpx;">
									<text>查询</text>
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
				<!--图表-->
				<u-list-item>
					<view class="charts-box">
						<qiun-data-charts :canvas2d='true' ref="chartRef" type="line" style="width: 100%;" :opts="opts"
							:chartData="chartData" />
					</view>
				</u-list-item>
				<u-list-item>
					<view style="margin-left: 20rpx;">
						<view style="float: left;">
							<input class="chooseYear" disabled="true" placeholder="请选择班级" v-model="selectClass" @click="showCC=true" />
							<u-picker keyName="text" :show="showCC" :columns="classes" @cancel="showCC=false"
								closeOnClickOverlay="true" @close="showCC=false"
								@confirm="classChange"></u-picker>
						</view>
						<view style="float: left;margin-left: 20rpx;">
							<input class="chooseYear" disabled="true" placeholder="请选择日期" style="width: 220rpx;" v-model="selectTime"
								@click="showCD=true" />
							<u-picker keyName="text" :show="showCD" :columns="times" @cancel="showCD=false"
								closeOnClickOverlay="true" @close="showCD=false"
								@confirm="dayChange"></u-picker>
						</view>
						<view class="querybtu" @click="searchDetail">
							<view class="btuicon"></view>
							<view style="margin-left: 70rpx;margin-top: -45rpx;">
								<text>查询</text>
							</view>
						</view>
					</view>
				</u-list-item>
				<u-list-item>
					<view class="classinfocard">
						<view style="float: left;" class="mandwtext">
							<text>本月已考勤<text style="margin-left: 10rpx;color: #ff0000;">{{monthNums}}</text></text>
						</view>
						<view class="mandwtext" style="float: left; margin-left: 130rpx;">
							<text>详情</text>
						</view>
						<view style="float: right;margin-right: 20rpx;" class="mandwtext">
							<text>本周已考勤<text style="margin-left: 10rpx;color: #ff0000;">{{weekNums}}</text></text>
						</view>
						<view class="detailContent" v-for="(item,index) in hisData">
							<view class="hisBox" :style="{'background-color': item.colour}">
								<view>{{item.cname}}</view>
								<view>{{item.date}}</view>
								<button @click="lookDetailHis(item)" type="primary" size="mini"
									style="margin: 0rpx;">详情</button>
							</view>
						</view>
					</view>
				</u-list-item>

			</u-list>
		</view>


		<!-- 详情弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view>
				<view class="popup-content">
					<view class="uni-container">
						<scroll-view scroll-x="true">
							<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据">
								<uni-tr>
									<uni-th width="150" align="center">学生姓名</uni-th>
									<uni-th align="center">学号</uni-th>
									<uni-th width="204" align="center">状态</uni-th>
								</uni-tr>
								<uni-tr v-for="(item, index) in tableData" :key="index">
									<uni-td>
										<view class="name">{{ item.stuname }}</view>
									</uni-td>
									<uni-td align="center">{{ item.stuid }}</uni-td>
									<uni-td>
										<span :style="{'color':item.status.split(' ')[1]}">
											{{ item.status.split(' ')[0] }}
										</span>
									</uni-td>
								</uni-tr>
							</uni-table>
							<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize"
									:current="pageCurrent" :total="total" @change="change" /></view>
						</scroll-view>

					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import {
		HNIT_URL,
		USERNAME,
		IDENTITY
	} from "../../../constants/index.js"
	import {
		data
	} from "../../../uni_modules/uview-ui/libs/mixin/mixin.js";
	export default {
		data() {
			return {
				showCD: false,
				showCC: false,
				showCM: false,
				showCY: false,
				type: 'center',
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 15, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						}
					}
				},
				//当前登录老师的工号
				username: '',
				//图表中的数据
				datas: {
					categories: [],
					series: []
				},
				classes: [
					[]
				],
				years: [
					[{
						value: '',
						text: '请选择学年'
					}]
				],
				currentY: '',
				months: [
					[{
							value: '1',
							text: '请选择周次'
						}, {
							value: '1',
							text: '1'
						}, {
							value: '2',
							text: '2'
						}, {
							value: '3',
							text: '3'
						},
						{
							value: '4',
							text: '4'
						}, {
							value: '5',
							text: '5'
						}, {
							value: '6',
							text: '6'
						},
						{
							value: '7',
							text: '7'
						}, {
							value: '8',
							text: '8'
						}, {
							value: '9',
							text: '9'
						},
						{
							value: '10',
							text: '10'
						}, {
							value: '11',
							text: '11'
						}, {
							value: '12',
							text: '12'
						}, {
							value: '13',
							text: '13'
						}, {
							value: '14',
							text: '14'
						}, {
							value: '15',
							text: '15'
						}, {
							value: '16',
							text: '16'
						}, {
							value: '17',
							text: '17'
						}, {
							value: '18',
							text: '18'
						}, {
							value: '19',
							text: '19'
						}, {
							value: '20',
							text: '20'
						}
					]
				],
				currentM: 1,
				chartExtra: {
					touch: true // Enable touch events to trigger click
				},
				//所带的班级
				classes: [
					[]
				],
				//时间
				times: [
					[{
						value: '',
						text: '请选择时间'
					}]
				],
				hisData: [],
				//选择的班级
				selectClass: '',
				//选择的时间点
				selectTime: '',
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				sid: 0,
				//本周考勤数
				weekNums: 0,
				//本月考勤数
				monthNums: 0
			};
		},
		onReady() {
			//查询下拉框中的数据
			this.username = uni.getStorageSync(USERNAME)
			this.searchSelect()
		},
		methods: {
			// 返回上一页
			back() {
				if (uni.getStorageSync(IDENTITY) == 4) {
					uni.reLaunch({
						url: '../../../pages/manage/home/index'
					});
				} else {
					uni.reLaunch({
						url: '../../../pages/teacher/home/index'
					});
				}
			},
			searchSelect() {
				this.$request.get(HNIT_URL + "wx/getAllSchoolYears").then(res => {
					res.forEach((item, index) => { //js遍历数组
						this.years[0].push({
							value: item,
							text: item
						})
						this.currentY = res[0]
						this.years[0][0].value = res[0]
					});
					let params = {
						school_year: this.years[0][0].value,
						week: this.months[0][0].value
					}
					//顺便得到x轴的初始化数据
					this.$request.get(HNIT_URL + "wx/getXaries", params).then(res => {
						this.datas.categories = res
						for (let i = 0; i < res.length; i++) {
							this.times[0].push({
								value: res[i],
								text: res[i]
							})
						}
						this.times[0][0].value = res[0]
						this.selectTime = res[0]
					})

					params = {
						username: this.username,
						year: this.currentY,
						week: this.currentM
					}
					this.$request.get(HNIT_URL + "wx/queryHistories", params).then(res => {
						if (res.code == 1) {
							this.datas.series = []
							var datas = []
							var classes = [
								[{
									value: '',
									text: '请选择班级'
								}]
							]
							Object.keys(res.data).forEach(function(value, key) {
								classes[0].push({
									value: value,
									text: value
								})
								datas.push({
									name: value + '已到',
									data: res.data[value]
								})
							})
							this.selectClass = datas[0].name.slice(0, -2)
							classes[0][0].value = this.selectClass
							this.classes = classes
							this.datas.series = datas
							this.chartData = JSON.parse(JSON.stringify(this.datas));
							this.$request.get(HNIT_URL + "wx/queryHistoriesNums?username=" + this.username)
								.then(res => {
									if (res.code == 1) {
										this.weekNums = res.data.weekNums
										this.monthNums = res.data.monthNums
									}
								})
						}
					})
				})
			},
			search() {
				//得到当前选择的学年以及周次的数据
				let params = {
					school_year: this.currentY,
					week: this.currentM
				}
				//顺便得到x轴的初始化数据
				this.$request.get(HNIT_URL + "wx/getXaries", params).then(res => {
					this.datas.categories = res
					this.times = [
						[{
							value: '',
							text: '请选择时间'
						}]
					]
					for (let i = 0; i < res.length; i++) {
						this.times[0].push({
							value: res[i],
							text: res[i]
						})
					}

					this.times[0][0].value = res[0]
					this.selectTime = res[0]
				})

				params = {
					username: this.username,
					year: this.currentY,
					week: this.currentM
				}
				this.$request.get(HNIT_URL + "wx/queryHistories", params).then(res => {
					if (res.code == 1) {
						this.datas.series = []
						var datas = []
						Object.keys(res.data).forEach(function(value, key) {
							datas.push({
								name: value,
								data: res.data[value]
							})
						})
						this.datas.series = datas
						this.chartData = JSON.parse(JSON.stringify(this.datas));
					}
				})
			},
			yearChange(e) {
				this.currentY = e.value[0].value;
				this.showCY = false
			},
			monthChange(e) {
				this.currentM = e.value[0].value;
				this.showCM = false
			},
			classChange(e) {
				this.selectClass = e.value[0].value;
				this.showCC = false
			},
			dayChange(e) {
				this.selectTime = e.value[0].value;
				this.showCD = false
			},
			searchDetail() {
				//得到选择的年月日
				var d = this.currentY.split("-")
				var year = d[2] === '1' ? d[0] : d[1]
				var date = year + '-' + this.selectTime
				let params = {
					clas: this.selectClass,
					time: date,
					username: this.username
				}
				this.$request.get(HNIT_URL + "wx/getHisData", params).then(res => {
					this.hisData = []
					if (res.code == 1) {
						this.hisData = res.data
					}
				})
			},
			lookDetailHis(item) {
				this.sid = item.sid
				this.pageDetailHis()
				this.$refs.popup.open(this.type)
			},
			change(e) {
				this.pageCurrent = e.current
				this.pageDetailHis()
			},
			pageDetailHis() {
				let params = {
					sid: this.sid,
					pageNum: this.pageCurrent,
					pageSize: this.pageSize
				}
				this.$request.get(HNIT_URL + "wx/queryDetailHis", params).then(res => {
					if (res.code == 1) {
						this.tableData = res.data.list
						this.total = res.data.total
					}
				})
			}
		},
	};
</script>

<style scoped>
	.mandwtext {
		color: #707070;
		font-size: 30rpx;
		margin-top: 15rpx;
		margin-left: 20rpx;
	}

	.uliststyle {
		margin-top: 10rpx;
		width: 100%;
	}

	.classinfocard {
		margin-left: 20rpx;
		width: 94%;
		background-color: white;
		height: 1290rpx;
		border-radius: 40rpx;
		box-shadow: 1px 2px 5px 2px #dadada;
		margin-top: 30rpx;
		margin-bottom: 100rpx;
	}

	.btuicon {
		background-image: url("data:image/svg+xml,%3Csvg t='1694520113153' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='6054' width='200' height='200'%3E%3Cpath d='M882.030272 974.530557l-141.416183-141.416183a454.95573 454.95573 0 1 1 92.005007-92.005008l141.357915 141.474451a65.026972 65.026972 0 0 1-91.946739 91.94674zM142.902014 468.473882a325.134858 325.134858 0 1 0 325.134859-325.134858 325.134858 325.134858 0 0 0-325.076591 325.018322l-0.058268 0.116536z' fill='%231b56e2' p-id='6055'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.querybtu {
		float: left;
		font-size: 34rpx;
		font-family: FZSuXSLSJW;
		margin-left: 20rpx;
		width: 145rpx;
		height: 70rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 1px 2px 5px 2px #dadada;
	}

	.toptitle {
		margin-top: -65rpx;
		color: #000000;
		font-size: 50rpx;
		font-family: FZSuXSLSJW;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.backicon {
		float: left;
		background-image: url("data:image/svg+xml,%3Csvg t='1689146294791' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='19508' width='200' height='200'%3E%3Cpath d='M501.30944 464.22016c0-19.99872-16-35.19488-35.99872-35.99872H310.4V350.62784L137.61536 464.22016l171.98592 113.59232V500.21888h155.70944c19.99872-0.79872 35.99872-16 35.99872-35.99872z' fill='%23005CFF' p-id='19509'%3E%3C/path%3E%3Cpath d='M886.38464 212.01408c0-39.46496-31.99488-71.45984-71.45984-71.45984H443.88864c-39.46496 0-71.45984 31.99488-71.45984 71.45984v117.69856a29.42464 29.42464 0 1 0 58.84928 0V225.00352a25.6 25.6 0 0 1 25.6-25.6h358.05184c2.72384 0 5.23264 0.88576 7.296 2.3552l-252.50816 91.904c-15.872 5.77536-28.74368 29.28128-28.74368 52.49536v382.88384H456.87808a25.6 25.6 0 0 1-25.6-25.6V598.7328a29.42464 29.42464 0 1 0-58.84928 0v117.69856c0 39.46496 31.99488 71.45984 71.45984 71.45984h97.08544v62.68928c0 23.21408 12.86656 37.3504 28.74368 31.57504l287.42144-104.61184c15.872-5.77536 28.74368-29.28128 28.74368-52.49536v-0.39424c0.3072-2.69824 0.50688-5.43232 0.50688-8.2176v-504.4224z' fill='%23005CFF' p-id='19510'%3E%3C/path%3E%3C/svg%3E");
		background-size: cover;
		width: 50rpx;
		height: 50rpx;
		margin-top: 6rpx;
		margin-left: 12rpx;
	}

	.back {
		float: left;
		width: 80rpx;
		margin-top: 99rpx;
		height: 58rpx;
		margin-left: -640rpx;
		border-radius: 80rpx;
		backdrop-filter: blur(5px);
		/* 设置高斯模糊效果 */
		background-color: rgba(255, 255, 255, 0.9);
		border: 1rpx #c6c6c6 solid;
	}

	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		margin-bottom: 40rpx;
		margin-left: 20rpx;
		margin-top: 30rpx;
		background-color: white;
		border-radius: 40rpx;
		box-shadow: 1px 2px 5px 2px #dadada;
		width: 94%;
		height: 300px;
	}

	.header-top {
		margin-top: 50rpx;
		display: flex;
		justify-content: space-around;
	}

	.choose-detail {
		display: flex;
		justify-content: space-around;
	}

	.chooseYear {
		height: 70rpx;
		width: 300rpx;
		background-color: #ffffff;
		border-radius: 40rpx;
		text-align: center;
		box-shadow: 1px 2px 5px 2px #dadada;
	}

	.chooseMonth,
	.chooseDay,
	.choose-class,
	.choose-month {
		width: 220rpx;
	}

	.title {
		display: flex;
		justify-content: center;
		margin-top: 100rpx;
		font-weight: 150px;
		font-size: 60rpx;
	}

	.detailTitle {
		display: flex;
		justify-content: center;
		font-size: 60rpx;
		font-weight: 800;
	}

	.hisBox {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: red;
		height: 80rpx;
		width: 94%;
		border-radius: 30rpx;
		margin-left: 3%;
		margin-top: 10rpx;
	}

	.popup-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 40rpx;
		background-color: #fff;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.uni-container {
		width: 700rpx;
	}

	.localData {
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;
		font-weight: 900;
		font-size: 50rpx;
	}
</style>